import {
  ProFormText,
  ProFormSelect,
  ProForm,
  ProFormDependency,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { isEmpty } from 'lodash';
import type { ProFormInstance } from '@ant-design/pro-components';
import { Button } from 'antd';
import StorageManager from '@/utils/StorageManager';

import useDispatcher from '../../hooks/useDispatcher';
import getProFileData from '../../getProFileData';

type Props = {
  formRef: ProFormInstance | any;
  fatherName: string;
  fatherLabel: string;
  widfix?: boolean;
};

const AddObjectBtn: React.FC<Props> = ({ widfix = false, formRef, fatherName, fatherLabel }) => {
  const dispatch = useDispatcher();
  const { formValue } = getProFileData();
  const eunmList: any = StorageManager.getLocalStorageSync('eunmList');
  const OptionsExtandvalueIdList = eunmList?.OptionsExtandvalueIdList || [];

  const { productKey = 0 } = formValue;

  const handleAddValue = (extandValueOne: string, extandValueTwo: string, type: string) => {
    if (productKey !== 0 || isEmpty(extandValueOne) || isEmpty(extandValueTwo)) return;
    // Json 互转
    const extandValue = formRef.current?.getFieldValue([type]) || {};
    const extandValueBro = extandValue.length > 2 ? JSON.parse(extandValue) : {};
    extandValueBro[extandValueOne] = extandValueTwo;
    formRef.current?.setFieldValue([type], JSON.stringify(extandValueBro));
    dispatch('setFormValue', { [type]: JSON.stringify(extandValueBro) });
  };

  const disabledFlag =
    productKey !== 0 &&
    ['productIdEx', 'productIdRuleEx', 'productIdBackupEx'].includes(fatherName);

  return (
    <>
      <ProForm.Group>
        <ProFormSelect
          disabled={disabledFlag}
          labelCol={{ span: 8 }}
          style={{ width: '48%' }}
          // width="lg"
          name={[fatherName + 'Lable']}
          label={fatherLabel}
          placeholder="请选择"
          options={OptionsExtandvalueIdList}
        />
        <div style={{ marginLeft: '-40%' }}>
          <ProFormText
            disabled={disabledFlag}
            labelCol={{ span: 8 }}
            width={128}
            name={[fatherName + 'Value']}
            label={null}
            placeholder="请输入"
          />
        </div>

        <ProFormDependency name={[fatherName + 'Lable', fatherName + 'Value']}>
          {(res) => {
            return (
              <div style={{ marginLeft: -430 }}>
                <Button
                  // style={{ marginLeft: widfix ? 0 : -160 }}
                  disabled={disabledFlag}
                  onClick={() => {
                    handleAddValue(
                      res[fatherName + 'Lable'],
                      res[fatherName + 'Value'],
                      fatherName,
                    );
                  }}
                  type="primary"
                >
                  新增
                </Button>
                <Button
                  style={{ marginLeft: 16 }}
                  onClick={() => {
                    formRef.current?.setFieldValue(fatherName, '');
                    dispatch('setFormValue', { fatherName: '' });
                  }}
                  type="primary"
                >
                  清空
                </Button>
              </div>
            );
          }}
        </ProFormDependency>
        <div style={{ paddingLeft: 132 }}>
          <ProFormTextArea
            disabled={disabledFlag}
            width={700}
            label={null}
            name={fatherName}
            placeholder={fatherName}
            fieldProps={{
              autoSize: {
                minRows: 4,
                maxRows: 16,
              },
            }}
          />
        </div>
      </ProForm.Group>
    </>
  );
};

export default AddObjectBtn;
